<template>
  <div ref="chartRef" style="height: 500px;"></div>
</template>

<script setup>
import {ref, onMounted, watch, nextTick} from 'vue'
import * as echarts from 'echarts'

const props = defineProps(['data'])
const chartRef = ref(null)
let chartInstance = null

defineExpose({
  changeTab
})
function changeTab() {
  nextTick(()=>{
    chartInstance.resize()
  })
}

// 初始化图表
onMounted(() => {
  chartInstance = echarts.init(chartRef.value)
  window.addEventListener('resize', () => chartInstance.resize())
})

// 更新图表
watch(() => props.data, (newData) => {
  if (!chartInstance || !newData.length) return

  // 提取轨迹数据
  const trajectory = newData.map(d => ({
    lon: d.position.lon,
    lat: d.position.lat,
    hei: d.position.hei,
    time: d.time,
    velocity: d.velocity.vel,
    heading: d.attitude.head
  }))

  // 计算速度范围
  const minVelocity = Math.min(...trajectory.map(p => p.velocity))
  const maxVelocity = Math.max(...trajectory.map(p => p.velocity))

  // 计算高度范围
  const minHeight = Math.min(...trajectory.map(p => p.hei))
  const maxHeight = Math.max(...trajectory.map(p => p.hei))
  console.log(trajectory)

  const option = {
    title: {
      text: '飞行轨迹分析',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        const point = params.data
        console.log(params.data)
        return `
          <div>时间: ${point.time.toFixed(3)}s</div>
          <div>经度: ${point.value[0].toFixed(6)}</div>
          <div>纬度: ${point.value[1].toFixed(6)}</div>
          <div>高度: ${point.value[2].toFixed(1)}m</div>
          <div>速度: ${point.value[3].toFixed(1)}km/h</div>
          <div>航向: ${point.heading.toFixed(1)}°</div>
        `
      }
    },
    grid: {
      top: '80px',
      left: '50px',
      right: '50px',
      bottom: '50px'
    },
    xAxis: {
      type: 'value',
      name: '经度',
      scale: true
    },
    yAxis: {
      type: 'value',
      name: '纬度',
      scale: true
    },
    visualMap: [
      {
        type: 'continuous',
        dimension: 2, // 映射高度数据
        min: minHeight,
        max: maxHeight,
        calculable: true,
        inRange: {
          color: ['#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']
        },
        text: ['高', '低'],
        textStyle: {
          color: '#666'
        },
        orient: 'horizontal',
        left: 'center',
        bottom: 10
      },
      {
        type: 'continuous',
        dimension: 3, // 映射速度数据
        min: minVelocity,
        max: maxVelocity,
        calculable: true,
        inRange: {
          symbolSize: [4, 12] // 根据速度调整点的大小
        },
        text: ['慢', '快'],
        textStyle: {
          color: '#666'
        },
        orient: 'horizontal',
        left: 'center',
        bottom: 40
      }
    ],
    series: [
      // 轨迹线
      {
        name: '飞行轨迹',
        type: 'line',
        data: trajectory.map(p => [p.lon, p.lat]),
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#5470c6'
        },
        smooth: true,
        zlevel: 1
      },
      // 轨迹点
      {
        name: '轨迹点',
        type: 'scatter',
        coordinateSystem: 'cartesian2d',
        data: trajectory.map(p => ({
          value: [p.lon, p.lat, p.hei, p.velocity],
          time: p.time,
          heading: p.heading
        })),
        symbol: 'circle',
        symbolSize: function(data) {
          // 根据速度调整点的大小
          return 4 + (data[3] - minVelocity) / (maxVelocity - minVelocity) * 8
        },
        itemStyle: {
          color: function(params) {
            // 根据高度调整颜色
            const heightRatio = (params.data[2] - minHeight) / (maxHeight - minHeight)
            return echarts.color.modifyHSL('#5470c6', 0, 0, -0.3 + heightRatio * 0.6)
          }
        },
        emphasis: {
          itemStyle: {
            borderColor: '#000',
            borderWidth: 2
          }
        },
        zlevel: 2
      },
      // 起点和终点标记
      {
        name: '起点',
        type: 'scatter',
        data: [[trajectory[0].lon, trajectory[0].lat]],
        symbol: 'pin',
        symbolSize: 30,
        itemStyle: {
          color: '#91cc75'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '起点',
          color: '#91cc75',
          fontWeight: 'bold'
        },
        zlevel: 3
      },
      {
        name: '终点',
        type: 'scatter',
        data: [[trajectory[trajectory.length - 1].lon, trajectory[trajectory.length - 1].lat]],
        symbol: 'pin',
        symbolSize: 30,
        itemStyle: {
          color: '#ee6666'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '终点',
          color: '#ee6666',
          fontWeight: 'bold'
        },
        zlevel: 3
      },
      // 航向指示器
      {
        name: '航向',
        type: 'scatter',
        data: trajectory.filter((_, i) => i % 10 === 0).map(p => ({
          value: [p.lon, p.lat],
          symbolRotate: p.heading - 90, // 调整航向角度
          time: p.time
        })),
        symbol: 'triangle',
        symbolSize: 10,
        itemStyle: {
          color: '#000'
        },
        zlevel: 4
      }
    ]
  }

  chartInstance.setOption(option)
}, { deep: true })
</script>